<template>
    <div class="table">

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>账户资金</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>


    <div class="modulecontainer">
        <div class="panel-container">
          <div class="panel-title">比特币持有数量</div>
          <div class="panel-content pipecontainer" id="bitcoinNum">
            
          </div>
        </div>

        <div class="panel-container">
          <div class="panel-title">以太坊持有数量</div>
          <div class="panel-content pipecontainer" id="yitaicoinNum">
            
          </div>
        </div>

        <div class="panel-container">
          <div class="panel-title">华克金持有数量</div>
          <div class="panel-content pipecontainer" id="huakeNum">
            
          </div>
        </div>
    </div>

     <div class="modulecontainer">
         
        <div class="panel-container numbercontainer">
          <div class="panel-title">虚拟币转入总次数</div>
          <div class="panel-content coinnum">
            100
          </div>
        </div>

          <div class="panel-container numbercontainer">
          <div class="panel-title">虚拟币转出总次数</div>
          <div class="panel-content coinnum">
            300
          </div>
        </div>
           <div class="panel-container numbercontainer">
          <div class="panel-title">BTM取款总次数</div>
          <div class="panel-content coinnum">
            500
          </div>
        </div>

           <div class="panel-container numbercontainer">
          <div class="panel-title">BTM存款总次数</div>
          <div class="panel-content coinnum">
            700
          </div>
        </div>

    </div>


    <div class="modulecontainer">
      
   <div class="container-title">账户前20强</div>
    <el-table   :data="userCenter" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
          
            <el-table-column  label="头像" width="120">
                 <template scope="scope">
              <img :src="scope.row.u_avatar" width="100%"  style="margin-top:5px;"/>
            </template>
            </el-table-column>
            <el-table-column  prop="index"   label="排名" width="120"> 
            </el-table-column>


            <el-table-column prop="u_name" label="姓名"   width="120">
            </el-table-column>
                  <el-table-column prop="u_tel"    label="联系方式" width="200">
            </el-table-column>
                <el-table-column prop="u_country"      label="注册国家" width="120">
            </el-table-column>

            <el-table-column  prop="account_info"   label="账户信息"> 
            </el-table-column>
         
    
    </el-table>


    </div>



    </div>
</template>

<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import echarts from "echarts";
var Server = new HttpReq();
export default {
  data() {
    return {
      ugcData: [],
      typeCenter: [],
      cur_page: 1,
      all_page: 1,
      activityId: "",
      orderBy: "",
      del_list: "",
      offset: 10,
      select_cate: "",
         userCenter: [
        {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：100；以太坊持有：80；华克金持有：70",
          index:1

        },
            {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：80；以太坊持有：80；华克金持有：70",
           index:2

        },
            {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：80；以太坊持有：70；华克金持有：70",
           index:3

        }
      ],
    };
  },
  mounted() {
    this.initBitCoin("bitcoinNum", "比特币数量");
    this.initBitCoin("yitaicoinNum", "以太坊数量");
    this.initBitCoin("huakeNum", "华克金数量");
  },
  computed: {},
  methods: {
    initBitCoin(id, title) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        title: {
          text: "",
          subtext: "金额分布",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["用户持有", "平台持有"]
        },
        series: [
          {
            name: title,
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "用户持有" },
              { value: 310, name: "平台持有" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#bitcoinNum {
  position: relative;
}
.modulecontainer{

   
    overflow:hidden;
    margin-top:20px;
    background: #fff;
    padding:10px 0;

  
}
.container-title{
    padding:10px 20px;
    background:rgb(223, 236, 235);
    font-weight: 600;
}
.coinnum{
    font-size:20px;
    font-weight: bold;
    color:#555;
}
/* 数据列表 */
.panel-container {
  border: 1px solid #ececec;
  padding: 0;
  float: left;
  margin-right: 20px;
}
.panel-title {
  background: #ececec;
}
.panel-title,
.panel-content {
  padding: 10px 20px;
  box-sizing: border-box;
}
.iconfont {
  margin-right: 5px;
  color: rgb(217, 122, 93);
}
.pipecontainer {
  width: 300px;
  height: 300px;
}
.numbercontainer{
   width:200px;
   height:200px;
}
</style>